<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <view class="top">
      <view class="top_title"> 集头像合成限量藏品 </view>
      <view class="top_text">
        <text class="top_text_item">结束时间：</text>
        <text
          class="top_text_item"
          v-if="
            CollectionDetail.merge_info &&
            !CollectionDetail.merge_info.startstate
          "
          >{{ CollectionDetail.merge_info.end_at }}</text
        >
        <u-count-down
          :timestamp="CollectionDetail.merge_info.countDown"
          separator="colon"
          separator-color="#ffffff"
          style="margin-left: 8rpx"
          v-else
          separator-size="28"
          font-size="28"
          @end="end(index)"
          color="#ffffff"
          :show-border="false"
          bg-color="##000000"
        ></u-count-down>
      </view>
    </view>
    <!-- <view class="" style="position: absolute;top: -10rpx;">
			<image src="../../static/compound_center_background.png" mode="" style="width: 750rpx;height: 750rpx;"></image>
		</view> -->
    <view class="center_img">
      <image
        :src="CollectionDetail.cover"
        mode=""
        class="center_product"
      ></image>
    </view>
    <view class="product_name">
      <!-- <image
				 class="product_name_image1"
				 src="../../static/oliveBranch1.png"
			  ></image> -->
      <view class="product_name_image1"></view>

      <view class="product_name_center">
        <view class="product_name_center_first">{{
          CollectionDetail.name
        }}</view>
        <view class="product_name_center_second">
          <view class="product_name_center_limited">限量</view>
          <view class="product_name_center_inStock"
            >{{ CollectionDetail.total_num }}份</view
          >
          <view
            v-if="CollectionDetail.is_show_surplus_num == 1"
            class=""
            style="margin-left: 20rpx"
          >
            剩余 {{ CollectionDetail.surplus_num }}
          </view>
        </view>
      </view>

      <!-- <image
				 class="product_name_image2"
				 src="../../static/oliveBranch2.png"
			  ></image> -->
      <view class="product_name_image2"></view>
    </view>

    <u-number-box v-model="batchvalue" :min="1" style="display: flex;justify-content: center;"></u-number-box>

    <view  class="product_button"  @click="batchcompose"  v-if="is_batch_state">
      开始合成
    </view>
    <view class="product_buttons" v-else> 材料不足 </view>

    <!-- ---------------------------------------------------------------- -->

    <view class="product_compound">
      <view class="product_title">
        <image
          src="../../static/title_left.png"
          mode=""
          style="width: 128rpx; height: 24rpx"
        ></image>
        <view class="">
          <text style="margin: 0 20rpx" class="product_title_text"
            >合成所需藏品</text
          >
        </view>
        <image
          src="../../static/title_right.png"
          mode=""
          style="width: 128rpx; height: 24rpx"
        ></image>
      </view>
      <view class="product_content">
        <view
          class="product_content_item"
          v-for="(item, index) in CollectionDetail.merge_modules"
          style="position: relative"
          :key="index"
        >
          <view @click="handleshowspringfram(index, item)" ref="filterindex">
            <view class="product_content_img">
              <image
                :src="item.cover"
                mode=""
                class="product_content_product"
              ></image
            ></view>
            <view class="" style="text-align: center; margin: 16rpx 0">
              <view class="product_content_text">{{ item.name }}</view>
            </view>
            <view class="" style="">
              <!-- <text class="product_content_position"  >{{ item.select_num }}/{{ item.num }}</text> -->
              <image src="../../static/Selected.png" mode="" v-if="filterlist(popupfragmentlist[index])" style="width:40rpx;height:40rpx;position: absolute;top:0;right:0" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="bottom">
      <view class="bottom_title">
        <image
          src="../../static/title_left.png"
          mode=""
          style="width: 128rpx; height: 24rpx"
        ></image>
        <view class="">
          <text style="margin: 0 20rpx" class="bottom_title_text"
            >合成说明</text
          >
        </view>
        <image
          src="../../static/title_right.png"
          mode=""
          style="width: 128rpx; height: 24rpx"
        ></image>
      </view>
      <view class="bottom_conter">
        {{ CollectionDetail.merge_info.explain }}
      </view>
    </view>

    <u-popup
      v-model="show_merge_popup"
      mode="center"
      width="670rpx"
      height="1176rpx"
      :border-radius="12"
      :closeable="true"
      :mask-close-able="true"
      :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.5)' }"
      @close="close"
    >
      <view class="springframe">
        <view class="springframe_title">
          <image
            src="../../static/title_left.png"
            mode=""
            style="width: 128rpx; height: 24rpx"
          ></image>
          <view class="">
            <text style="margin: 0 20rpx" class="springframe_title_text"
              >添加藏品</text
            >
          </view>
          <image
            src="../../static/title_right.png"
            mode=""
            style="width: 128rpx; height: 24rpx"
          ></image>
        </view>

        <view class="Nodata" v-if="popupfragmentlist == 0">
          没有可合成的藏品
        </view>
        <view v-else style="display: flex;flex-wrap: wrap;align-items: flex-start;overflow: auto; " >
          <scroll-view
            scroll-y="true"
            style="max-height: 445px"
            @scrolltolower="$u.throttle(scrollLower, 1000, true)"
          >
            <!-- <block v-for="(item1, index) in popupfragmentlist" :key="index">
              <view style="margin: 0 -5rpx 0 25rpx; display: inline-block">
                <view
                  :class="
                    item1.choiceId == 1 ? 'springframeitems' : 'springframeitem'
                  "
                  @click="choice(item1, index)"
                >
                  <view style="" class="springframe_border">
                    <image
                      :src="item1.product.cover"
                      mode=""
                      style="
                        width: 240rpx;
                        height: 240rpx;
                        position: absolute;
                        top: 10%;
                        left: 10%;
                      "
                    />
                  </view>
                  <view>
                    <image
                      src="../../static/Selected.png"
                      mode=""
                      v-if="item1.choiceId == 1"
                      style="
                        width: 40rpx;
                        height: 40rpx;
                        position: absolute;
                        top: 0;
                        right: 0;
                      "
                    />
                  </view>
                  <view>
                    <image
                      src="/static/collect_icon.png"
                      style="width: 44rpx; height: 44rpx"
                      class="item_farstimg"
                    ></image>
                    <text class="item_center">{{ item1.no }}</text>
                  </view>
                  <view
                    class=""
                    style="color: #ffffff; text-align: center; margin: 10rpx 0"
                  >
                    {{ item1.product_name }}
                  </view>
                </view>
              </view>
            </block> -->
            
            <!-- 批量合成 -->
          <block v-for="item1,index in popupfragmentlist" :key="index" >
            <template  v-if="ldx == index">
               <view v-for="i in item1" style="margin:0 -5rpx 0 25rpx;display: inline-block;">
                <view class="collection_num" ref="numa">{{i.has_num}}</view>
                <view :class="i.choiceId == 1? 'springframeitems':'springframeitem'"   @click="batchchoice(i,index)">
                  <view style="" class="springframe_border">
                  <image :src="i.product.cover" mode="" style="width:240rpx;height:240rpx;position: absolute;top: 10%;left: 10%;"/>
                  </view>
                  <view>
                    <image src="../../static/Selected.png" mode="" v-if="i.choiceId == 1" style="width:40rpx;height:40rpx;position: absolute;top:0;right:0" />
                  </view>
                  <view>
                    <image src="/static/collect_icon.png" style="width: 44rpx;height: 44rpx;" class="item_farstimg" ></image>
                    <text  class="item_center">{{i.product.no}}</text>
                  </view>
                  <view class="" style="color:#ffffff;text-align: center;margin:10rpx 0">
                    {{i.product.name}}
                  </view>
              </view>
               </view>
            </template>
          </block>
          </scroll-view>
        </view>

        <view class="springframe_button" @click="confirm"> 确定 </view>
      </view>
    </u-popup>


    <u-popup
        v-model="composestate"
        mode="center"
        width="510rpx"
        height="680rpx"
        :border-radius="24"
        :closeable="true"
        :mask-close-able="false"
      >
        <view class="Blindbox">
          <view class="Blindbox_top"> 合成成功！ </view>
          <view class="Blindbox_center">
            获得<span style="color: #1fe7e7">《{{ Composedetail.name }}》</span> x{{ batchvalue }}
          </view>
          <view  style="border-radius: 32rpx;border: 2rpx solid #dfdfdf;margin-top: 30rpx; "  >
            <image :src="Composedetail.cover" class="Blindbox_img"></image>
          </view>
          <view class="Blindbox_button" @click="composestate = false"> 确定 </view>
        </view>
      </u-popup>
  </view>
</template>

<script>
import api from "../../api/api";
import moment from "moment";
import { getTimeleft } from "@/utils/timeleft.js";
import tip from "@/utils/tip.js";
export default {
  data() {
    return {
      show_merge_popup: false,
      id: "",

      CollectionDetail: { merge_info: {} },
      popupfragmentlist: [],
      now_material: 0,
      total: 0,
      click_index: 0,

      ZanCunList: [],
      HeChengList: {
        merge_modules: [],
      },

      popLimit: 10,

      ProductList: [],
      click_product_id_arr: [],

      
      ldx:-1,
      merge_info_id:null,
      batchvalue:1,
      is_batch_state:false,
      batchmap:new Map(),
      batitemID:[],

      composestate:false,
      Composedetail:{},
    };
  },
  computed:{
    filterlist(){
      return (indexlist)=>{
        if(!indexlist) return false
        return indexlist.findIndex((e)=> (e.choiceId == 1)) != -1
      }
    }
  },
  onLoad(options) {
    this.id = options.id;
    this.merge_info_id = options.merge_info_id
  },
  async onShow() {
    this.handleReset()
    await this.GetCollectionDetail();

    this.getmergeDetail()
  },
  methods: {
    batchchoice(i,index){
      if(i.choiceId == 0){
        this.popupfragmentlist[index].forEach((e)=>{
          e.choiceId = 0
        })
        i.choiceId = 1

        let idx = this.batitemID.findIndex((e)=> (e.module_id == i.product_merge_module_id) )
        idx!=-1?this.batitemID.splice(idx,1):''
        this.batitemID.push({'id':i.id,module_id:i.product_merge_module_id})
      }else{
        i.choiceId = 0
        this.batitemID.forEach((el, idx) => {
          if (el.id == i.id) this.batitemID.splice(idx,1);
        });
      }
      this.batitemID.length == this.CollectionDetail.merge_modules.length?this.is_batch_state=true:this.is_batch_state=false
      this.$forceUpdate();
    },
    clickspringfram(index) {
      this.ldx = index;
      this.detailstate = true;
      // this.popupfragmentlist = this.springframlist[index].list[0];
      this.$nextTick(async()=>{
        if(!this.popupfragmentlist[index]){
          await new Promise((res)=> setTimeout(()=>res(),1000))
        }
        this.popupfragmentlist[index].forEach((e)=>{
          this.batchmap.set(e.id,e.has_num)
        })
        let widthlist = this.$refs.numa.map((e)=>{
          return e.$el.clientWidth
        })
        let maxwidth = Math.max(...widthlist)
        this.$refs.numa.forEach((e)=> e.$el.style.width = e.$el.style.height = `${maxwidth}px`)
      })  

    },
    getmergeDetail(){
      this.CollectionDetail.merge_modules.forEach(async(e)=>{
        let res = await api.mergeDetail({
          query: {
            module_id: e.id
          },
        });
        if(res.code == 0){
          res.data.forEach((e)=>e.choiceId = 0)
          this.popupfragmentlist = [...this.popupfragmentlist,[...res.data]]
          this.popupfragmentlist.sort((a,b)=>a[0].product_merge_module_id - b[0].product_merge_module_id)
        }else{
          this.$refs.uToast.show({title:res.msg})
        }
      })
    },
    async batchcompose(){
      let numlist = this.CollectionDetail.merge_modules.map((e)=> {
        return this.batchvalue * e.num
      })
      this.batitemID.sort((a,b)=>a.module_id-b.module_id)
      for (let i = 0; i < this.batitemID.length; i++) {
        if(this.batchmap.get(this.batitemID[i].id)<numlist[i]) {
          this.$refs.filterindex[i].$el.classList.add('rock')
          setTimeout(() => {
            this.$refs.filterindex[i].$el.classList.remove('rock')
          }, 200);
          return this.$refs.uToast.show({title:'藏品不足'})
        }
      }
      let res = await api.batchMerge({
        query: {
          product_id: this.CollectionDetail.id,
          merge_info_id:this.merge_info_id,
          merges: this.batitemID,
          merge_num:this.batchvalue
        },
        method: "POST",
        loading:'加载中'
      });
      if(res.code == 0){
        this.is_batch_state = false
        this.popupfragmentlist = []
        this.getmergeDetail()
        this.batitemID = []
        this.Composedetail = res.data
        this.composestate = true
      }else{
        this.$refs.uToast.show({title:res.msg})
      }
    },


    handleReset() {
      this.CollectionDetail = { merge_info: {} };
      this.popupfragmentlist = []
      this.now_material = 0;
      this.total = 0;
      this.click_index = 0;
      this.ZanCunList = [];
      this.HeChengList = {
        merge_modules: [],
      };
      this.ProductList = [];
      this.click_product_id_arr = [];
    },
    // 打开弹框，选择每一种材料的数量
    handleshowspringfram(index, item) {
      this.ldx = index;
      this.show_merge_popup = true;
      this.click_index = index;
      this.product_id_arr = item.merges.map((x) => x.child_product_id);
      // this.popupfragmentlist = this.ZanCunList[index].list[0];

      this.$nextTick(async()=>{
        if(!this.popupfragmentlist[index]){
          await new Promise((res)=> setTimeout(()=>res(),1000))
        }
        this.popupfragmentlist[index].forEach((e)=>{
          this.batchmap.set(e.id,e.has_num)
        })
        let widthlist = this.$refs.numa.map((e)=>{
          return e.$el.clientWidth
        })
        let maxwidth = Math.max(...widthlist)
        this.$refs.numa.forEach((e)=> e.$el.style.width = e.$el.style.height = `${maxwidth}px`)
      })  
    },

    async GetCollectionDetail() {
      let res = await api.productDetail({
        query: {
          id: this.id,
          is_merge: 1,
        },
        loading: "加载中",
      });

      if (res.code == 0) {
        this.CollectionDetail = res.data;

        // ------------------------------------------倒计时的时间
        let newTime = moment();
        this.CollectionDetail.merge_info.countDown = getTimeleft(
          this.CollectionDetail.merge_info.end_at,
          newTime
        ).duration;
        if (
          this.CollectionDetail.merge_info.countDown > 0 &&
          this.CollectionDetail.merge_info.countDown <= 86400
        ) {
          this.CollectionDetail.merge_info.startstate = true;
        } else {
          this.CollectionDetail.merge_info.startstate = false;
        }

        
      }
    },

    // 合成
    async compound() {
      // console.log('----', this.HeChengList.merge_modules);
      // uni.navigateTo({
      //   url: `../../pages/collect_record/collect_record?user_product_id=10`,
      // });
      let res = await api.merge({
        query: {
          product_id: this.CollectionDetail.id,
          merge_modules: this.HeChengList.merge_modules,
        },
        method: "post",
      });
      if (res.code == 0) {
        tip.defaults("合成成功");
        this.now_material = 0;
        this.total = 0;
        this.popupfragmentlist = [];
        this.ZanCunList = [];
        this.GetCollectionDetail();

        setTimeout(() => {
          uni.navigateTo({
            url: `../../pages/collect_record/collect_record?user_product_id=${res.data.id}`,
          });
        }, 1500);
      } else {
        tip.defaults(res.msg);
      }
    },

    // 选取
    choice(item1, index) {
      
      if (item1.choiceId == 0) {
        if (
          this.CollectionDetail.merge_modules[this.click_index].select_num ==
          this.CollectionDetail.merge_modules[this.click_index].num
        ) {
          this.$refs.uToast.show({
            title: "当前材料已充足",
          });
          return;
        }

        this.HeChengList.merge_modules[this.click_index].user_product_ids.push(
          item1.id
        );

        item1.choiceId = 1;
        this.now_material++;
        this.CollectionDetail.merge_modules[this.click_index].select_num++;
      } else {
        this.HeChengList.merge_modules[
          this.click_index
        ].user_product_ids.forEach((el, idx) => {
          if (el == item1.id) {
            this.HeChengList.merge_modules[
              this.click_index
            ].user_product_ids.splice(idx, 1);
          }
        });
        item1.choiceId = 0;
        this.now_material--;
        this.CollectionDetail.merge_modules[this.click_index].select_num--;
      }
    },

    async getProductList(product_id_arr, index) {
      let res = await api.products({
        query: {
          user_id: uni.getStorageSync("userInfo").id,
          product_id: product_id_arr.length == 1 ? product_id_arr[0] : "",
          product_ids:
            product_id_arr.length == 1 ? "" : product_id_arr.join(","),
          // page: this.popup_page,
          page: this.ZanCunList[this.click_index].page,
          limit: this.popLimit,
        },
      });

      if (res.code == 0) {
        if (this.ZanCunList[this.click_index].page == 1) {
          if (res.data.length > 0) {
            this.ProductList[index] = res.data;
            this.ProductList[index].forEach((x) => {
              x.CollectionDetail = JSON.parse(x.CollectionDetail);
            });
          }
        } else {
          if (res.data.length > 0) {
            res.data.forEach((x) => {
              x.CollectionDetail = JSON.parse(x.CollectionDetail);
            });
            this.ProductList[index] = [...this.ProductList[index], ...res.data];
          }
        }
        this.ProductList[index].forEach((x, i) => {
          if (!this.ProductList[index][i].choiceId) {
            this.ProductList[index][i].choiceId = 0;
          }
        });
        this.ZanCunList[index].list[0] = this.ProductList[index];
        this.popupfragmentlist = this.ZanCunList[index].list[0];
        // this.ZanCunList[index].list[0].forEach((x, idx) => {
        //   this.ZanCunList[index].list[0][idx].choiceId = 0;
        // });

        this.$forceUpdate();
      }
    },

    scrollLower() {
      console.log("---弹框触底---");
      this.ZanCunList[this.click_index].page++;
      this.getProductList(this.product_id_arr, this.click_index);
    },
    close() {},
    async confirm() {
      this.show_merge_popup = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
// * {
//    touch-action: none;
// }
/deep/ .u-mode-center-box {
  background: #1c1d1d;
}
.whole {
  width: 100%;
  height: 100%;
  background-color: $bg-color1;
  min-height: 100vh;
  padding-top: 10rpx;
  padding-bottom: 50rpx;

  background-image: url("/static/background_mine.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    background-image: url("/static/compound_background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    .top_title {
      font-size: 32rpx;
      font-weight: 500;
      color: #1fe7e7;
      line-height: 44rpx;
    }
    .top_text {
      padding-top: 10rpx;
      .top_text_item {
        color: #ffffff;
        font-size: 24rpx;
      }
    }
  }
  .center_img {
    // margin: 0 187rpx;
    margin: 60rpx auto;
    width: 360rpx;
    height: 360rpx;
    border-radius: 32rpx;
    border: 2rpx solid #dfdfdf;
    .center_product {
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      // margin: 50%;
      // transform: translate(-50%, -50%);
      border-radius: 32rpx;
      width: 345rpx;
      height: 345rpx;
    }
  }
  .product_name {
    margin-top: 6rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_image1 {
      width: 60rpx;
      height: 122rpx;
    }
    &_image2 {
      width: 60rpx;
      height: 122rpx;
    }
    &_center {
      &_first {
        width: 400rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        height: 44rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 44rpx;
        text-align: center;
      }
      &_second {
        display: flex;
        align-items: center;
        justify-content: center;

        margin: 20rpx auto;
        font-size: 24rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 34rpx;

        // width: 202rpx;
        height: 34rpx;
        border-radius: 4rpx;
      }
      &_limited {
        // width: 76rpx;
        padding: 0 14rpx;
        height: 34rpx;
        color: $text-color4;
        background: $gradient1;
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 4rpx;
        text-align: center;
      }
      &_inStock {
        padding: 0 14rpx;
        // margin-left: 10rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 34rpx;
        background: #262934;
      }
    }
  }
  .product_button {
    margin: 30rpx;
    height: 90rpx;
    color: $text-color4;
    background: $button;
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    // border-radius: 16rpx;
  }
  .product_buttons {
    color: #ffffff;
    margin: 30rpx;
    height: 90rpx;
    // background-image: linear-gradient(to right, #F78623 , #D5280A );
    background-color: #606060;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    border-radius: 16rpx;
  }
  .product_Copywriting {
    display: flex;
    justify-content: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 34rpx;
  }
  .product_compound {
    background-color: $bg-color3;
    margin: 30rpx;
    border-radius: 36rpx;
    .product_title {
      padding: 40rpx 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .product_title_text {
        font-size: 32rpx;
        font-weight: 500;
        color: #1fe7e7;
        line-height: 44rpx;
      }
    }
    .product_content {
      margin: 20rpx 0rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      padding-bottom: 20rpx;
      .product_content_item {
        // margin: 0 187rpx;

        margin: 30rpx 25rpx 0 30rpx;
        // width: 240rpx;
        // height: 240rpx;
        // border-radius: 32rpx;
        // border: 2rpx solid #dfdfdf;
        .product_content_img {
          background: linear-gradient(
            134deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(248, 209, 123, 0.05) 100%
          );
          box-shadow: inset 0px 1px 10px 0px rgba(255, 255, 255, 0.15);
          border-radius: 8px;
          border: 1px solid rgba(255, 255, 255, 0.03);
          // padding: 26rpx;
          width: 290rpx;
          height: 290rpx;
          position: relative;

          .product_content_product {
            position: absolute;
            top: 10%;
            left: 10%;
            border-radius: 32rpx;
            width: 230rpx;
            height: 230rpx;
          }
        }

        .product_content_text {
          margin: 20rpx 0;
          font-size: 24rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 34rpx;

          width: 260rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .product_content_position {
          width: 80rpx;
          height: 40rpx;
          color: $text-color4;
          background: $gradient1;
          background-repeat: no-repeat;
          background-size: 100%;
          border-radius: 10px;
          position: absolute;
          right: -15rpx;
          top: -20rpx;
          text-align: center;
        }
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: $bg-color3;
    margin: 0 30rpx;
    border-radius: 36rpx;
    .bottom_title {
      padding: 40rpx 0 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .bottom_title_text {
        font-size: 32rpx;
        font-weight: 500;
        color: #1fe7e7;
        line-height: 44rpx;
      }
    }
    .bottom_conter {
      margin: 0 30rpx;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
      padding-bottom: 30rpx;
      word-break: break-all;
    }
  }
  .springframe {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    width: 670rpx;
    height: 1176rpx;
    background: transparent !important;
    border: 1px solid #1fe7e7 !important;
    border-radius: 24rpx;
    .springframe_title {
      padding: 40rpx 0 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .springframe_title_text {
        font-size: 32rpx;
        font-weight: 500;
        color: #1fe7e7;
        line-height: 44rpx;
      }
    }
    .springframe_button {
      width: 295px;
      height: 45px;
      color: $text-color4;
      background: $button;
      background-repeat: no-repeat;
      background-size: 100%;
      border-radius: 8px;
      text-align: center;
      margin: 0 auto;
      line-height: 45px;
      margin-top: 20rpx;
      margin-bottom: 40rpx;
      z-index: 99;
    }
    .Nodata {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1fe7e7;
      line-height: 22px;
      text-align: center;
    }
    .springframe_border {
      background: linear-gradient(
        134deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(248, 209, 123, 0.05) 100%
      );
      box-shadow: inset 0px 1px 10px 0px rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.03);
      // padding: 26rpx;
      width: 300rpx;
      height: 300rpx;
      position: relative;
    }
    .springframeitem {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-content: center;
      margin: 10rpx 0rpx;
      // padding: 2rpx;
      .item_farstimg {
        z-index: 2;
        position: relative;
        top: 14rpx;
        left: -2rpx;
      }
      .item_center {
        width: 265rpx;
        display: inline-block;
        position: relative;
        left: -30rpx;
        font-size: 20rpx;
        padding: 5rpx 13rpx 5rpx 30rpx;
        border-radius: 17rpx;
        background-image: $gradient1;
        text-align: center;
      }
    }
    .collection_num{
      position: absolute;
      background-color: rgba(250, 250, 250, .3);
      margin-left: 10rpx;
      margin-top: 15rpx;
      min-width: 50rpx;
      aspect-ratio: 1/1;
      z-index: 9;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
    }
    .springframeitems {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-content: center;
      margin: 10rpx auto;
      // border: 2rpx solid #d5280a;
      position: relative;
      .item_farstimg {
        z-index: 2;
        position: relative;
        top: 14rpx;
        left: -2rpx;
      }
      .item_center {
        width: 265rpx;
        display: inline-block;
        position: relative;
        left: -30rpx;
        font-size: 20rpx;
        padding: 5rpx 13rpx 5rpx 30rpx;
        border-radius: 17rpx;
        background-image: $gradient1;
        text-align: center;
      }
    }
  }
}


.Blindbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 680rpx;
  padding-top: 10%;
  // transform: translate(-0%,-20%);
  background: $bg-color3;
  position: relative;
  .Blindbox_top {
    font-size: 28rpx;
    color: #ffffff;
  }
  .Blindbox_center {
    margin-top: 10rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
  .Blindbox_img {
    width: 330rpx;
    height: 330rpx;
    border-radius: 24rpx;
    margin: 4rpx 4rpx -4rpx;
    -webkit-border-radius: 24rpx;
    -moz-border-radius: 24rpx;
  }
  .Blindbox_button {
    margin-top: 50rpx;
    width: 290rpx;
    height: 72rpx;
    text-align: center;
    line-height: 72rpx;
    color: #ffffff;
    font-size: 28rpx;
    background: linear-gradient(90deg, #1FE6E6 0%, #3F9ED2 48%, #DF7FD6 100%);
    border-radius: 36rpx;
  }
}

.rock{
  animation: orso 0.2s 1;
}
@keyframes orso {
  0%{
    transform:translateX(-5px)
  }
  15%{
    transform:translateX(5px)
  }
  35%{
    transform:translateX(-3px)
  }
  55%{
    transform:translateX(3px)
  }
  75%{
    transform:translateX(-1px)
  }
  100%{
    transform:translateX(1px)
  }
}
</style>
